<template>
  <div class="material-tooltip">
    <n-tooltip trigger="hover" placement="top">
      <template #trigger>
        <n-tag
          :type="getTagType()"
          size="small"
          round
          class="material-tag"
          @click="handleClick"
        >
          <template #icon>
            <n-icon :size="12">
              <CubeOutline />
            </n-icon>
          </template>
          {{ material.name }} × {{ material.count }}
        </n-tag>
      </template>
      
      <div class="tooltip-content">
        <div v-if="materialInfo" class="material-info">
          <div class="info-header">
            <div class="info-image">
              <n-avatar
                :size="32"
                :src="materialInfo.image"
                :fallback-src="'/images/default-material.png'"
                round
              />
              <div class="grade-badge" :class="`grade-${materialInfo.grade}`">
                {{ materialInfo.grade }}
              </div>
            </div>
            <div class="info-basic">
              <div class="info-name">
                <n-text strong>{{ materialInfo.name }}</n-text>
              </div>
              <div class="info-type">
                <n-text :depth="3" style="font-size: 12px;">
                  {{ materialInfo.type }}
                  <span v-if="materialInfo.sub_type"> · {{ materialInfo.sub_type }}</span>
                </n-text>
              </div>
            </div>
          </div>
          
          <div v-if="materialInfo.description" class="info-description">
            <n-text :depth="2" style="font-size: 13px;">
              {{ materialInfo.description }}
            </n-text>
          </div>
          
          <div class="info-footer">
            <n-text :depth="3" style="font-size: 11px;">
              需要数量: {{ material.count }}
            </n-text>
          </div>
        </div>
        
        <div v-else-if="loading" class="loading-info">
          <n-spin size="small" />
          <n-text :depth="3" style="font-size: 12px; margin-left: 8px;">
            加载中...
          </n-text>
        </div>
        
        <div v-else class="error-info">
          <n-text :depth="3" style="font-size: 12px;">
            暂无详细信息
          </n-text>
        </div>
      </div>
    </n-tooltip>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { CubeOutline } from '@vicons/ionicons5'
import { getMaterialInfo } from '@/api/specialOperation'
import type { ParsedMaterial, MaterialInfo } from '@/types/specialOperation'

// Props
const props = defineProps<{
  material: ParsedMaterial
}>()

// Emits
const emit = defineEmits<{
  click: [material: ParsedMaterial]
}>()

// 响应式数据
const loading = ref(false)
const materialInfo = ref<MaterialInfo | null>(null)
const error = ref('')

// 获取标签类型
const getTagType = (): string => {
  if (!materialInfo.value) return 'default'
  
  const grade = materialInfo.value.grade
  if (grade >= 5) return 'error'
  if (grade >= 4) return 'warning'
  if (grade >= 3) return 'info'
  if (grade >= 2) return 'success'
  return 'default'
}

// 加载材料信息
const loadMaterialInfo = async () => {
  if (loading.value || materialInfo.value) return
  
  try {
    loading.value = true
    error.value = ''
    
    const response = await getMaterialInfo(props.material.id)
    
    if (response.code === 1 && response.data) {
      materialInfo.value = response.data
      // 更新材料名称
      if (response.data.name && response.data.name !== `材料#${props.material.id.slice(-4)}`) {
        props.material.name = response.data.name
      }
    } else {
      throw new Error(response.msg || '获取材料信息失败')
    }
  } catch (err: any) {
    error.value = err.message || '加载材料信息失败'
    console.warn('加载材料信息失败:', err)
  } finally {
    loading.value = false
  }
}

// 处理点击事件
const handleClick = () => {
  emit('click', props.material)
}

// 组件挂载时加载材料信息
onMounted(() => {
  // 延迟加载，避免同时发起太多请求
  setTimeout(() => {
    loadMaterialInfo()
  }, Math.random() * 1000)
})
</script>

<style scoped>
.material-tooltip {
  display: inline-block;
}

.material-tag {
  cursor: pointer;
  transition: all 0.2s ease;
}

.material-tag:hover {
  transform: scale(1.05);
}

.tooltip-content {
  max-width: 280px;
  padding: 8px;
}

.material-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.info-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.info-image {
  position: relative;
  flex-shrink: 0;
}

.grade-badge {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: bold;
  color: white;
  border: 1px solid var(--n-card-color);
}

.grade-1 { background: #909399; }
.grade-2 { background: #67c23a; }
.grade-3 { background: #409eff; }
.grade-4 { background: #e6a23c; }
.grade-5 { background: #f56c6c; }

.info-basic {
  flex: 1;
  min-width: 0;
}

.info-name {
  margin-bottom: 2px;
}

.info-description {
  padding: 6px 8px;
  background: var(--n-color-target);
  border-radius: 4px;
  border-left: 3px solid var(--n-primary-color);
}

.info-footer {
  text-align: right;
  padding-top: 4px;
  border-top: 1px solid var(--n-border-color);
}

.loading-info,
.error-info {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  min-height: 40px;
}

/* 深色主题适配 */
@media (prefers-color-scheme: dark) {
  .info-description {
    background: rgba(255, 255, 255, 0.05);
  }
}
</style>
